<script setup lang='ts'>
import { ElDrawer, ElButton,  ElCheckbox,ElRadioGroup,ElRadioButton,ElScrollbar} from "element-plus"
import { computed, onBeforeMount, onMounted, ref } from "vue"
import { VueDraggable } from 'vue-draggable-plus'
// import {Rank} from '@element-plus/icons-vue'
import {MyIcon} from "@/components/MyIcon"
import { deepClone } from "@/utils"
const drawer = ref(false)

const props = defineProps({
  columns: {
    type: Array,
    default: []
  }
})

const allSelected = ref(false)

const emit = defineEmits(['updateColumnSetting'])

const columns = ref<any>([])

const editorColumnsHidden = (culumnsData:any) => {
  columns.value = culumnsData.map((item: any) => {
    return {
      ...item,
      hidden: !item.hidden
    }
  })
}

onBeforeMount(() => {
  columns.value = deepClone(props.columns)
  editorColumnsHidden(columns.value)
})

// 取消
const cancelClick = () => {
  drawer.value = false
}

// 确定
const confirmClick = () => {
  const newColumns = columns.value.map((item: any) => {
    return {
      ...item,
      hidden: !item.hidden
    }
  })
  editorColumnsHidden(columns.value)
  emit('updateColumnSetting', newColumns)
  cancelClick()
  // console.log(columns.value);
}

const selectedCount = computed(() => {
  const selected = columns.value.filter((item: any) => {
    if(item.type==='selection') return false
    return item.hidden
  })
  return selected.length
})

const allCount = computed(() => {
  const newColumns = columns.value.filter((item: any) => {
    return item.type!=='selection'
  })
  return newColumns.length
})

const itemSelectChange = () => {
  if(selectedCount.value === allCount.value) {
    allSelected.value = true
  }else{
    allSelected.value = false
  }
}

const open = () => {
  editorColumnsHidden(deepClone(props.columns))
  drawer.value = true
}

onMounted(() => {
  itemSelectChange()
})

const allSelectedChange = (val: any) => {
  columns.value =columns.value.map((item: any) => {
    return {
      ...item,
      hidden: val
    }
  })
}

defineExpose({
  open
})

</script>

<template>
  <el-drawer v-model="drawer" direction="rtl">
    <template #header>
      <h4>列设置</h4>
    </template>
    <template #default>
      <div class="content">
        <div class="columnTop" >
          <div class="left">
            <el-checkbox @change="allSelectedChange" v-model="allSelected">{{selectedCount}}/{{allCount}}</el-checkbox>
          </div>
          <div class="right">
            对齐 / 排序
          </div>
        </div>
        <div class="columnList">
          <ElScrollbar>
            <VueDraggable
              v-model="columns"
              :animation="150"
              handle=".handle"
            >
              <div v-for="item in columns" :key="item.prop" >
                <div class="columnItem" v-if="item.type!=='selection'">
                  <div class="left">
                    <el-checkbox @change="itemSelectChange"  v-model="item.hidden">
                      {{item.label}}
                    </el-checkbox>
                  </div>
                  <div class="right">
                    <el-radio-group v-model="item.align">
                      <el-radio-button value="left">
                        <MyIcon icon="el:ArrowLeft" :color="item.align === 'left' ? '#fff' : '#000'" />
                      </el-radio-button>
                      <el-radio-button  value="center" >
                        <MyIcon icon="el:Close"  :color="item.align === 'center' ? '#fff' : '#000'"/>
                      </el-radio-button>
                      <el-radio-button  value="right" >
                        <MyIcon icon="el:ArrowRight"  :color="item.align === 'right' ? '#fff' : '#000'"/>
                      </el-radio-button>
                    </el-radio-group>
                    <ElButton link class="handle">
                      <MyIcon icon="el:Rank" />
                    </ElButton>
                  </div>
                </div>
              </div>
            </VueDraggable>
          </ElScrollbar>
        </div>
      </div>
    </template>
    <template #footer>
      <el-button @click="cancelClick">取消</el-button>
      <el-button type="primary" @click="confirmClick">保存</el-button>
    </template>
  </el-drawer>
</template>

<style lang='less' scoped>
.columnTop{
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  margin-bottom: 20px;
  user-select: none;
  box-sizing: border-box;
}
.columnItem{
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  margin-bottom: 10px;
  .right{
    display: flex;
    .handle{
      cursor: move;
      padding-left:10px;
      height: 100%;
    }
  }
}
.content{
  height: 100%;
  display:flex;
  flex-direction: column;
  overflow: hidden;
  .columnList{
    flex: 1;
    overflow: hidden;
  }
}
.columnTop{
  user-select: none;
  .right{
    color: gray;
  }
}
</style>
